/* eslint-disable react/no-multi-comp */
/* eslint-disable react/display-name */
import React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import {
  List,
  ListItem,
  Typography,
  ListItemIcon,
  Divider,
  Button,
} from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
import { useSelector, useDispatch } from 'react-redux'
import { setProfile } from 'redux/actions/AuthActions';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';

const useStyles = makeStyles(theme => ({
  root: {
  },
  listItem: {
    flexDirection: 'column',
    alignItems: 'flex-start',
  },
  navLink: {
    '&:hover': {
      color: theme.palette.primary.dark,
    },
  },
  listItemIcon: {
    minWidth: 'auto',
  },
  closeIcon: {
    justifyContent: 'flex-end',
    cursor: 'pointer',
  },
  menu: {
    display: 'flex',
  },
  menuItem: {
    marginRight: theme.spacing(8),
    '&:last-child': {
      marginRight: 0,
    },
  },
  menuGroupItem: {
    paddingTop: 0,
  },
  menuGroupTitle: {
    textTransform: 'uppercase',
  },
  divider: {
    width: '100%',
  },
}));

const SidebarNav = props => {
  const { pages, onClose, className, ...rest } = props;
  const classes = useStyles();
  const dispatch = useDispatch();
  const history = useHistory();

  const account = pages.profile;
  const profileData = useSelector((state) => state.auth.profileData)

  const handleLogout = () => {
    dispatch(setProfile(null));
    onClose();
    history.replace('/');
  }

  const MenuGroup = props => {
    const { item } = props;
    return (
      <List disablePadding>
        <ListItem disableGutters>
          <Typography
            variant="body2"
            color="primary"
            className={classes.menuGroupTitle}
          >
            {item ? item.groupTitle : ''}
          </Typography>
        </ListItem>
        {item && (
          item.pages.map((page, i) => (
            <ListItem disableGutters key={i} className={classes.menuGroupItem}>
              {page.title == 'Logout' ? (
                <Typography
                  variant="body1"
                  component={'a'}
                  href="/"
                  className={clsx(classes.navLink, 'submenu-item')}
                  color="textSecondary"
                  onClick={e => {
                    e.stopPropagation()
                    handleLogout()
                  }}
                >
                  {page.title}
                </Typography>
              ) : (
                <Typography
                  variant="body1"
                  component={'a'}
                  href={page.href}
                  className={clsx(classes.navLink, 'submenu-item')}
                  color="textSecondary"
                  onClick={() => onClose()}
                >
                  {page.title}
                </Typography>
              )}
            </ListItem>
          ))
        )}
      </List>
    );
  };

  const AccountPages = () => {
    const { settings, security } = account.children;
    return (
      <div className={classes.menu}>
        <div className={classes.menuItem}>
          <MenuGroup item={settings} />
          <MenuGroup item={security} />
        </div>
      </div>
    );
  };

  return (
    <List {...rest} className={clsx(classes.root, className)}>
      <ListItem className={classes.closeIcon} onClick={() => onClose()}>
        <ListItemIcon className={classes.listItemIcon}>
          <CloseIcon fontSize="small" />
        </ListItemIcon>
      </ListItem>

      <ListItem className={classes.listItem}>
        <Typography
          variant="h6"
          component={'a'}
          href={'/'}
          color="textPrimary"
          onClick={() => onClose()}
        >
          Home
        </Typography>
      </ListItem>

      <ListItem className={classes.listItem}>
        <Typography
          variant="h6"
          component={'a'}
          href={'/discover'}
          color="textPrimary"
          onClick={() => onClose()}
        >
          Discover
        </Typography>
      </ListItem>

      <ListItem className={classes.listItem}>
        <Typography
          variant="h6"
          component={'a'}
          href={'/publication'}
          color="textPrimary"
          onClick={() => onClose()}
        >
          Publication
        </Typography>
      </ListItem>

      <ListItem className={classes.listItem}>
        <Typography
          variant="h6"
          component={'a'}
          href={'/community'}
          color="textPrimary"
          onClick={() => onClose()}
        >
          Community
        </Typography>
      </ListItem>

      {/* <ListItem className={classes.listItem}>
        <Typography
          variant="h6"
          component={'a'}
          href={'/artists'}
          color="textPrimary"
          onClick={() => onClose()}
        >
          Artists
        </Typography>
      </ListItem> */}

      <ListItem className={classes.listItem}>
        <Typography
          variant="h6"
          component={'a'}
          href={'#'}
          color="textPrimary"
          onClick={() => onClose()}
        >
          Search
        </Typography>
      </ListItem>

      <ListItem className={classes.listItem}>
        <Typography
          variant="h6"
          component={'a'}
          href={'/live-feed'}
          color="textPrimary"
          onClick={() => onClose()}
        >
          LiveFeed
        </Typography>
      </ListItem>

      <ListItem className={classes.listItem}>
        <Typography
          variant="h6"
          component={'a'}
          href={'/voting'}
          color="textPrimary"
          onClick={() => onClose()}
        >
          Vote
        </Typography>
      </ListItem>

      <ListItem className={classes.listItem}>
        <Typography
          variant="h6"
          component={'a'}
          href={'/shop'}
          color="textPrimary"
          onClick={() => onClose()}
        >
          Shop
        </Typography>
      </ListItem>

      {
        (profileData && profileData.id) ? (
          <ListItem className={classes.listItem}>
            <Typography variant="h6" color="textPrimary" gutterBottom>
              Account
            </Typography>
            <AccountPages />
          </ListItem>
        ) : (
          <ListItem className={classes.listItem}>
            <Typography
              variant="h6"
              component={'a'}
              href={'/signin'}
              color="textPrimary"
              onClick={() => onClose()}
            >
              Login
            </Typography>
          </ListItem>)
      }
    </List>
  );
};

SidebarNav.propTypes = {
  className: PropTypes.string,
  pages: PropTypes.object.isRequired,
  onClose: PropTypes.func,
};

export default SidebarNav;
